<template>
	<view class="container">
		<view class="select-wrapper">
			<u-button :type="PriceSelected ? 'warning' : 'info'" @click="showPrice = true"
				:text="PriceSelected ? PriceSelected : '价格区间'">
			</u-button>
			<u-picker :show="showPrice" ref="uPickerPrice" :columns="priceColumns" @close="showPrice = false"
				@cancel="showPrice = false" closeOnClickOverlay @confirm="handlePriceConfirm"
				@change="handlePriceChange">
			</u-picker>
			<u-button :type="AreaSelected ? 'primary' : 'info'" @click="showArea = true"
				:text="AreaSelected ? AreaSelected : '所在区域'">
			</u-button>
			<u-picker :show="showArea" ref="uPickerArea" :columns="areaColumns" @confirm="handleAreaConfirm"
				@close="showArea = false" @cancel="showArea = false" closeOnClickOverlay @change="handleAreaChange">
			</u-picker>
			<u-button :type="TypeSelected ? 'success' : 'info'" @click="showType = true"
				:text="TypeSelected ? TypeSelected : '机构类型'">
			</u-button>
			<u-picker :show="showType" ref="uPickerType" :columns="typeColumns" @confirm="handleTypeConfirm"
				@close="showType = false" @cancel="showType = false" closeOnClickOverlay @change="handleTypeChange">
			</u-picker>
		</view>

		<view class="select-wrapper" style="margin-top: 0;">
			<u-button :type="StarSelected ? 'warning' : 'info'" @click="showArea = false"
				:text="StarSelected ? StarSelected : '星级'">
			</u-button>
			<!-- <u-picker :show="showArea" ref="uPickerArea" :columns="areaColumns" @confirm="handleAreaConfirm"

@change="handleAreaChange">

</u-picker> -->
			<u-button :type="MedicalCareSelected ? 'warning' : 'info'" @click="showArea = false"
				:text="MedicalCareSelected ? MedicalCareSelected : '医养'">
			</u-button>
			<!-- <u-picker :show="showArea" ref="uPickerArea" :columns="areaColumns" @confirm="handleAreaConfirm"

@change="handleAreaChange">

</u-picker> -->
			<u-button :type="DementiaSelected ? 'warning' : 'info'" @click="showArea = false"
				:text="DementiaSelected ? DementiaSelected : '失智'">
			</u-button>
			<!-- <u-picker :show="showArea" ref="uPickerArea" :columns="areaColumns" @confirm="handleAreaConfirm"

@change="handleAreaChange">

</u-picker> -->
		</view>

		<view>
			<view v-for="(item, index) in SievingDataList" :key="index" class="cell-wrapper"
				@click="handel_cell_click(item.id)">
				<view class="img-container">
					<u-image width="175" height="130" class="img-wrapper" :src="item.url"></u-image>
				</view>
				<view class="text-container">
					<view class="title">{{ item.enterInstName }}</view>
					<view @click.stop="handel_phone_click(item.principalContact)" class="phone-wrapper">
						<text class="label-title">电话:</text>
						<text class="label-content">{{item.principalContact}}</text>
					</view>
					<view @click.stop="handle_map_click(item.id)" class="phone-wrapper">
						<text class="label-title">地址:</text>
						<text class="label-content">{{item.instAdd}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import {
		QueryEnterInstInfoList,
		getEnterInstInfo,
	} from "@/api/elder/queryEnter.js";

	import {
		transformPostBody,
		transformRequestURL
	} from "@/utils/requestParams.js";

	import {
		mergeObjectArraysByCycle
	} from "@/utils/arraytool.js"

	export default {
		data() {
			return {
				// URL查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					areaCode: null,
					instLev: null,
					areaCode: null
				},
				// 表单查询参数
				queryParamsForm: {
					enterInstName: null,
					isPovertyRelief: null,
					isGloriousHomes: null,
					isCommunityCareCenter: null,
				},

				type: [],
				DataList: [],
				loading: false,
				finished: false,
				status: 'more', // 显示底部提示
				loadText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载",
					contentnomore: "没有更多数据了",
				},

				//选择器展示
				showArea: false, //区域
				showPrice: false, //价格区间
				showType: false, //类型
				showStar: false, //星级
				showMedicalCare: false, //医养
				showDementia: false, //失智

				//选择器选项
				priceColumns: [
					['全部', '200 以下', '200 - 800 每月', '800 - 1500 每月', '1500 - 2000 每月', '2000 每月以上']
				],
				areaColumns: [
					['全部', '龙山街道', '天福街道', '环山街道', '泽头镇', '侯家镇', '宋村镇', '高村镇', '葛家镇', '米山镇', '文登营镇', '小观镇', '大水泊镇',
						'张家产镇', '泽库镇', '界石镇'
					]
				],
				typeColumns: [
					['全部', '养老机构', '养老院']
				],
				TypeSelected: '',
				AreaSelected: '',
				PriceSelected: '',

				StarSelected: '',
				MedicalCareSelected: '',
				DementiaSelected: '',
			};
		},
		onShow() {
			this.getList()
		},
		computed: {
			SievingDataList() {
				return this.DataList.filter(item =>
					(!this.TypeSelected || item.enterInstType.includes(this.TypeSelected)) &&
					(!this.AreaSelected || item.areaName.includes(this.AreaSelected))
				);
			}
		},
		methods: {
			//获取老人信息列表
			getList() {
				this.loading = true;
				QueryEnterInstInfoList(
					transformRequestURL(this.queryParams),
					transformPostBody(this.queryParamsForm)
				).then((response) => {
					this.loading = false;
					console.log('response RTInfoList', response)
					this.DataList = mergeObjectArraysByCycle(response.rows, [{
							url: '/static/images/Enter/YLY1.jpg',
						},
						{
							url: '/static/images/Enter/YLY2.jpg',
						},
						{
							url: '/static/images/Enter/YLY3.jpg',
						},
						{
							url: '/static/images/Enter/YLY4.jpg',
						},
						{
							url: '/static/images/Enter/YLY5.jpg',
						},
						{
							url: '/static/images/Enter/YLY6.jpg',
						},
						{
							url: '/static/images/Enter/YLY7.jpg',
						}
					])
					this.total = response.total;
				});
			},
			//加载更多
			MyonLoad(e) {
				this.status = 'loading';
				console.log('MyonLoad', this.DataList.length, this.total)
				if (this.DataList.length < this.total) {
					this.fetch();
					this.status = 'more';
				} else {
					// all data loaded
					this.finished = true;
					this.status = 'nomore';
				}
				e.detail = {
					status: 'loading'
				};
				return e;
			},
			fetch() {
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				QueryEnterInstInfoList(
					transformRequestURL(this.queryParams),
					transformPostBody(this.queryParamsForm)
				).then((response) => {
					console.log('response concat', response)
					this.DataList = this.DataList.concat(mergeObjectArraysByCycle(response.rows, [{
							url: '/static/images/Enter/YLY1.jpg',
						},
						{
							url: '/static/images/Enter/YLY2.jpg',
						},
						{
							url: '/static/images/Enter/YLY3.jpg',
						},
						{
							url: '/static/images/Enter/YLY4.jpg',
						},
						{
							url: '/static/images/Enter/YLY5.jpg',
						},
						{
							url: '/static/images/Enter/YLY6.jpg',
						},
						{
							url: '/static/images/Enter/YLY7.jpg',
						}
					]));
					this.total = response.total;
				});
			},
			//点击地图跳转
			handle_map_click(id) {
				this.$tab.navigateTo('/pages/queryEnter/enterMap?id=' + id)
			},
			//跳转机构详情
			handel_cell_click(id) {
				this.$tab.navigateTo('/pages/queryEnter/detail?id=' + id)
			},
			//点击电话
			handel_phone_click(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				});
			},
			//价格选择
			handlePriceChange(e) {
				// const {
				// 	// 微信小程序无法将picker实例传出来，只能通过ref操作
				// 	columnIndex,
				// 	value,
				// 	values,
				// 	index,
				// 	picker = this.$refs.uPickerPrice
				// } = e
				// if (value[0] && value[0] != '全部') {
				// 	this.PriceSelected = value[0];
				// } else {
				// 	this.PriceSelected = ''
				// }
			},
			// 回调参数为包含columnIndex、value、values
			handlePriceConfirm(e) {
				if (e.value[0] && e.value[0] != '全部') {
					this.PriceSelected = e.value[0];
				} else {
					this.PriceSelected = ''
				}
				this.showPrice = false
			},

			//地区选择
			handleAreaChange(e) {
				// const {
				// 	// 微信小程序无法将picker实例传出来，只能通过ref操作
				// 	columnIndex,
				// 	value,
				// 	values,
				// 	index,
				// 	picker = this.$refs.uPickerArea
				// } = e
				// if (value[0] && value[0] != '全部') {
				// 	this.AreaSelected = value[0];
				// } else {
				// 	this.AreaSelected = ''
				// }
			},
			// 回调参数为包含columnIndex、value、values
			handleAreaConfirm(e) {
				if (e.value[0] && e.value[0] != '全部') {
					this.AreaSelected = e.value[0];
				} else {
					this.AreaSelected = ''
				}
				this.showArea = false
			},

			//类型选择
			handleTypeChange(e) {
				// const {
				// 	// 微信小程序无法将picker实例传出来，只能通过ref操作
				// 	columnIndex,
				// 	value,
				// 	values,
				// 	index,
				// 	picker = this.$refs.uPickerType
				// } = e
				// if (value[0] && value[0] != '全部') {
				// 	this.TypeSelected = value[0];
				// } else {
				// 	this.TypeSelected = ''
				// }
			},
			// 回调参数为包含columnIndex、value、values
			handleTypeConfirm(e) {
				if (e.value[0] && e.value[0] != '全部') {
					this.TypeSelected = e.value[0];
				} else {
					this.TypeSelected = ''
				}
				this.showType = false
			},

			// selectPrice(e) {
			// 	console.log(' selectPrice e', e)
			// 	const index = e.detail.index
			// 	const selectedPrice = this.priceRange[index]
			// 	this.selectedPrice = selectedPrice
			// },
			// selectType(e) {
			// 	console.log('segmented-control发生change事件，携带的value值为：', e.detail.index)
			// },
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.select-wrapper {
		display: flex;
		margin: 30rpx;

		u-button {
			margin-right: 20rpx;
		}
	}

	.select-wrapper u-button {
		margin-right: 10px;
	}

	.text-wrapper {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 35rpx;
		font-weight: bold;
		color: #ff976a;
		margin-bottom: 15rpx;
	}

	.load-more-wrapper {
		padding: 30rpx;
		text-align: center;
	}

	.cell-wrapper {
		display: flex;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.img-container {
		width: 175px;
		margin-right: 10px;
	}

	.text-container {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		flex: 1;
	}

	.phone-wrapper {
		display: flex;
		align-items: left;
	}

	.label-title {
		margin-bottom: 10rpx;
		display: inline-block;
		margin-right: 5px;
		color: #999;
	}

	.label-content {
		margin-bottom: 10rpx;
		display: inline-block;
		margin-right: 5px;
		color: #0c002e;
		font-weight: bolder;
		text-decoration:underline
	}

</style>